import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';


import '../../../common/style/colors.dart';
import '../../../common/style/images.dart';
import '../../../component/image_view.dart';
import '../../../component/text_view.dart';
import 'message_logic.dart';

class MessagePage extends StatelessWidget {
  final logic = Get.put(MessageLogic());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: TextView(
          text: '消息',
          fontSize: 16.sp,
          fontWeight: FontWeight.w500,
        ),
        actions: [
          IconButton(
              onPressed: () {},
              icon: Icon(
                Icons.settings,
                color: AppColors.colorTextMain,
              ))
        ],
        backgroundColor: AppColors.white,
        elevation: 0,
      ),
      body: Container(
        child: Column(
          children: [
            _buildTopBox(),
            Container(
              margin: EdgeInsets.only(top: 20),
              color: AppColors.colorDivider,
              height: 10,
            ),
            Expanded(
                child: Container(
              child: ListView.builder(
                itemCount: 10,
                itemBuilder: (context, index) => _buildMessageItem(index),
              ),
            ))
          ],
        ),
      ),
    );
  }

  _buildTopBox() {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 16.w),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          _buildTopBoxItem("回复", Icons.message),
          _buildTopBoxItem("分享", Icons.share),
          _buildTopBoxItem("点赞", Icons.linked_camera_sharp)
        ],
      ),
    );
  }

  _buildTopBoxItem(String label, IconData icon) {
    return Container(
      child: Column(
        children: [
          Container(
            width: 60.r,
            height: 60.r,
            alignment: Alignment.center,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(30),
                gradient: LinearGradient(
                    begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: _getGradientColor(label))),
            child: Icon(
              icon,
              color: AppColors.white,
            ),
          ),
          Padding(
            padding: EdgeInsets.only(top: 8.h),
            child: TextView(
              text: label,
              fontSize: 14.sp,
              fontColor: AppColors.colorTextSub,
            ),
          )
        ],
      ),
    );
  }

  _getGradientColor(String label) {
    switch (label) {
      case '回复':
        return const [Color(0xff8c66ff), Color(0xff5f2aff)];
      case '分享':
        return const [Color(0xffFFB266), Color(0xffFF962A)];
      case '点赞':
        return const [Color(0xff66D2FF), Color(0xff2AC1FF)];
    }
  }

  _buildMessageItem(int index) {
    return Container(
      margin: EdgeInsets.only(top: 12, left: 16, right: 16),
      child: Row(
        children: [
          Badge(
            label: TextView(
              text: "12",
              fontColor: AppColors.white,
              fontSize: 8.sp,
            ),
            child: ImageView(
              width: 52.r,
              height: 52.r,
              url: AppImages.tabHomeSelected,
            ),
          ),
          Expanded(
              child: Container(
            margin: EdgeInsets.only(
              left: 12.w,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    TextView(
                      text: "系统通知",
                      fontWeight: FontWeight.w500,
                    ),
                    TextView(
                      text: '14:36',
                      fontSize: 10.sp,
                      fontColor: AppColors.colorTextSub,
                    )
                  ],
                ),
                Container(
                  margin: EdgeInsets.only(top: 4),
                  child: TextView(
                    text: '嗯嗯好的 谢谢帮助',
                    fontColor: AppColors.colorTextSub,
                  ),
                )
              ],
            ),
          ))
        ],
      ),
    );
  }
}
